<script setup>
import PageContainer from '@/components/PageContainer/index.vue'
import { ref, reactive, onMounted } from 'vue'
import { useUserStore } from '@/stores'
import { userUpdateInfoService } from '@/api/user'
import { ElMessage } from 'element-plus'
const {
  user: { username, nickname, email, id },
  getUser
} = useUserStore()

const formRenderer = ref()
onMounted(() => {
  formRenderer.value.updateForm({ username, nickname, email, id })
})
const content = reactive([
  {
    type: 'input',
    id: 'username',
    label: '登录名称',
    el: {
      disabled: true
    }
  },
  {
    type: 'input',
    id: 'nickname',
    label: '用户昵称',

    rules: [
      { required: true, message: '请输入用户昵称', trigger: 'blur' },
      {
        pattern: /^\S{2,10}$/,
        message: '昵称必须是2-10位的非空字符串',
        trigger: 'blur'
      }
    ]
  },
  {
    type: 'input',
    id: 'email',
    label: '用户邮箱',

    rules: [
      { required: true, message: '请输入用户邮箱', trigger: 'blur' },
      { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
    ]
  }
])
const onSubmit = async () => {
  try {
    await formRenderer.value.methods.validate()
    let params = formRenderer.value.getFormValue()
    await userUpdateInfoService(params)
    await getUser()
    ElMessage.success('修改成功')

    console.log(params)
  } catch (error) {
    console.log(error)
  }
}
</script>

<template>
  <page-container title="基本资料">
    <el-row>
      <el-col :span="12">
        <el-form-renderer
          label-width="100px"
          :content="content"
          ref="formRenderer"
          style="padding-right: 30px"
          size="large"
        >
          <el-button type="primary" @click="onSubmit">提交修改</el-button>
        </el-form-renderer>
      </el-col>
    </el-row>
  </page-container>
</template>

<style scoped></style>
